<template>
  <div>
    <div class="swiper-container" ref="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="data1"
            src="https://image.hongbeibang.com/FrP8XrmbzlWDVkhfOpqhXwvBct5Q?600X340&imageView2/1/w/300/h/170"
            alt=""
          />
        </div>
        <div class="swiper-slide">
          <img class="data1"
            src="https://image.hongbeibang.com/Fpg7quUnHNLTPN9PhBEJgxbXFgXh?600X340&imageView2/1/w/300/h/170"
            alt=""
          />
        </div>
        <div class="swiper-slide">
          <img class="data1"
            src="https://image.hongbeibang.com/Fs12J5Iw3WgCATScrnEYgZnzLV_I?300X170&imageView2/1/w/298/h/170"
            alt=""
          />
        </div>
      </div>
    </div>
    
    
  </div>
</template>

<script>
// 引入swiper
import "swiper/swiper-bundle.min.css";
// 引入js
import Swiper from "swiper";
export default {
  data() {
    return {
      mySwiper: null,
    };
  },

  mounted() {
    this.$nextTick(() => {
      console.log(this.$refs["swiper-container"]);
      this.mySwiper = new Swiper(this.$refs["swiper-container"], {
        // direction: 'vertical', // 垂直切换选项
        loop: false, // 循环模式选项
        slidesPerView: 2,
      });
    });
  },
};
</script>

<style lang="scss" scoped>
 

    .swiper-container {
      width: 100%;
      height: 90px;
      margin-top: 50px;
       
     
      
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
.wiper-slide{
  width: 100%;
 
  
}
.data1 {
    width:176.64px;
    height: 80px;

  }
  
</style>

